<template>
  <view class="sub-category">
    <view class="sub-category-container">
      <view class="list">
        <view v-for="(cate, idx) in list.menuConfig.list" :key="idx" class="item" @click="onSwitchCategory(cate)">
          <image :src="cate.img"></image>
          <text>{{ cate.info[0].value }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      list: {
        type: Object,
        default: () => {}
      }
    },
    methods: {
      onSwitchCategory({ info }) {
        const url = info[1].value
        if (['/pages/index/index', '/pages/goods_cate/goods_cate', '/pages/order_addcart/order_addcart', '/pages/user/index'].indexOf(url) === -1) {
          uni.redirectTo({
            url
          })
        } else {
          uni.switchTab({
            url
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .sub-category {
    &-container {
      padding: 0 30rpx;
    }

    .list {
      display: flex;
      flex-wrap: wrap;

      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 25%;
        margin-top: 30rpx;

        image {
          width: 82rpx;
          height: 82rpx;
        }

        text {
          font-size: 24rpx;
          margin-top: 14rpx;
        }
      }
    }
  }
</style>
